<template>
  <div class="copies-container">
    <c-tab-tree
      class="tab-tree-container"
      :tabOptions="tabTreeData"
      :checkTreeNode="checkTreeNode"
    ></c-tab-tree>
    <c-search-trans
      class="search-trans-container"
      :treeTitles="['所有用户', '已选用户']"
      v-model:transforData="userData"
      :radio="radio"
      :search="searchUser"
    ></c-search-trans>
  </div>
</template>

<script>
import { requestOrgList, requestRoleList, requestUserList } from '../utils/api'
import SearchTrans from './SearchTrans.vue'
import TabTree from './TabTree.vue'

export default {
  name: 'GeneralCopies',
  components: {
    'c-tab-tree': TabTree,
    'c-search-trans': SearchTrans,
  },
  props: {
    radio: Boolean,
  },
  data() {
    return {
      tabTreeData: [
        {
          label: '按机构查找',
          name: 'org',
          data: [],
          props: { label: 'name' },
        },
        {
          label: '按角色查找',
          name: 'role',
          data: [],
        },
      ],
      userData: [],
    }
  },
  methods: {
    checkTreeNode(tabName, node) {
      this.requestUser({
        [tabName + 'Id']: node.id,
      })
    },
    async getUserList(payload) {
      const rst = await requestUserList(payload)
      console.log(`rst`, rst)
      if (rst?.success) {
        const data = rst.data.records.map((item) => ({
          label: item.cname ?? '',
          id: item.userId ?? '',
          value: item.username ?? '',
          cname: item.cname ?? '',
          key: item.username ?? '',
        }))
        return {
          status: true,
          data,
          page: {
            total: rst.data.total,
            current: rst.data.current,
          },
        }
      } else {
        return {
          status: false,
          message: rst?.message,
        }
      }
    },
    async getRoleList(payload) {
      const rst = await requestRoleList(payload)
      if (rst?.success) {
        const data = rst.data.map((item) => ({
          label: item.roleName,
          id: item.roleId,
          leaf: true,
        }))
        return {
          status: true,
          data,
        }
      } else {
        return {
          status: false,
          message: rst?.message,
        }
      }
    },
    async getOrgList(payload) {
      const rst = await requestOrgList(payload)
      if (rst?.success) {
        return {
          status: true,
          data: rst.data,
        }
      } else {
        return {
          status: false,
          message: rst?.message,
        }
      }
    },
    searchUser(val) {
      this.requestUser({
        keyword: val,
      })
    },

    async requestUser(params) {
      params = params || {}
      params.size = 1011
      const rst = await this.getUserList(params)
      if (!rst.status) {
        this.$message({
          type: 'warning',
          message: rst.message,
        })
      } else {
        this.userData = rst.data
      }
    },
  },
  async beforeMount() {
    let roleList = this.roleList
    let orgList = this.orgList
    if (!roleList) {
      const rst = await this.getRoleList()
      if (!rst.status) {
        this.$message({
          type: 'warning',
          message: rst.message,
        })
      } else {
        roleList = rst.data
      }
    }
    if (!orgList) {
      const rst = await this.getOrgList()
      if (!rst.status) {
        this.$message({
          type: 'warning',
          message: rst.message,
        })
      } else {
        orgList = rst.data
      }
    }
    this.tabTreeData[1].data = roleList
    this.tabTreeData[0].data = orgList
    await this.requestUser()
  },
}
</script>
<style scoped lang="scss">
.copies-container {
  display: flex;
  .tab-tree-container {
    flex: 0 0 200px;
  }
  .search-trans-container {
    margin-left: 10px;
    flex: auto;
  }
}
</style>
